<template>
    <!-- 标题文本词组 -->
    <header>
        <!-- 列表渲染标题文本单词 -->
        <span v-for="word in words" class="word">
            <!-- 首字母 -->
            <span class="initial">{{ word[0] }}</span>
            <!-- 其余字母 -->
            {{ word.slice(1) }}
        </span>
    </header>
</template>

<script lang="ts" setup>
// 组成标题文本词组的单词列表
const words:string[]=['Nucleic','Acid','Ligands','Interaction','Information','Collection'];
</script>

<style lang="scss" scoped>
/* 首字母文本样式 */
.initial{
    font-size:8.3vw;
    font-weight: bold;
    font-style:italic;
    color:yellow;
    text-shadow: 3px 3px 5px blue;
}
/* 非首字母文本样式 */
.word{
    color:white;
    font-size:2.9vw;
}
</style>
